import { useState } from "react"
import { Layout, Menu, theme } from "antd"
import { useSelector } from "react-redux"
import { globalConfig } from "@/globalConfig"
import { useNavigate, useLocation } from "react-router-dom"
import {
  HomeOutlined,
  UserOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SnippetsOutlined,
  SolutionOutlined,
} from "@ant-design/icons"
import "./index.less"

const AntdSider = Layout.Sider
const { useToken } = theme

function Sider() {
  // 获取store中的主题色配置
  const globalTheme = useSelector((state) => state.theme)

  // Antd的主题色hook,使用了Antd的useToken来实现主题色跟随，从token中可以选择Antd提供的各种颜色变量
  const { token } = useToken()

  // 当前路由地址
  const location = useLocation()

  // 路由hook
  const navigate = useNavigate()

  // 左侧导航的开合状态
  const [collapsed, setCollapsed] = useState(false)

  // 左侧导航列表
  const items = [
    {
      label: "首页",
      key: "/home",
      icon: <HomeOutlined />,
      children: null,
    },
    {
      label: "用户管理",
      key: "users",
      icon: <UserOutlined />,
      children: [
        {
          key: "/user-list",
          label: "用户列表",
        },
        {
          key: "/user-rights",
          label: "用户权限",
        },
      ],
    },
    {
      label: "业务协同",
      key: "synergy",
      icon: <SnippetsOutlined />,
      children: [
        {
          key: "/my-synergy",
          label: "我的协同",
        },
        {
          key: "/todo-colla",
          label: "待办协同",
        },
      ],
    },
    {
      label: "工作周报",
      key: "weekly",
      icon: <SolutionOutlined />,
      children: [
        {
          key: "/my-daily",
          label: "我的日报",
        },
        {
          key: "/staff-daily",
          label: "下属日报",
        },
      ],
    },
    {
      label: "统计报表",
      key: "statement",
      icon: <SolutionOutlined />,
      children: [
        {
          key: "/customer-statistics",
          label: "客户信息统计",
        },
      ],
    },
  ]

  const handleClick = (e) => {
    console.log("点击菜单", e)
    navigate(e.key) // 根据菜单项的 key 值进行跳转
  }

  // 切换左侧导航开合状态
  const onCollapse = () => {
    setCollapsed(!collapsed)
  }

  // 判断sider主题色
  let siderTheme = "dark"
  if (globalConfig.siderTheme === "light") {
    siderTheme = "light"
  } else if (globalConfig.siderTheme === "theme") {
    globalTheme.dark ? (siderTheme = "dark") : (siderTheme = "light")
  }

  // 左侧导航展开时的宽度
  const fullWidth = 200
  // 左侧导航收起时的宽度
  const collapsedWidth = 49

  return (
    <AntdSider
      className="M-sider"
      trigger={null}
      collapsible
      collapsed={collapsed}
      collapsedWidth={collapsedWidth}
      width={fullWidth}
      theme={siderTheme}
      style={{
        backgroundColor: token.colorBgContainer,
        borderColor: token.colorBorderSecondary,
      }}
    >
      <div className="sider-main">
        <Menu
          mode="inline"
          selectedKeys={location.pathname}
          items={items}
          className="sider-menu"
          onClick={handleClick}
        ></Menu>
        <div
          className="sider-footer"
          onClick={onCollapse}
          style={{
            color: token.colorTextBase,
            borderTopColor: token.colorBorder,
          }}
        >
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </div>
      </div>
    </AntdSider>
  )
}

export default Sider
